<template>
	<view class="box">
		<view class="content">
			<view class="content-top">
				<view class="content-title" :style="{'padding-top':statusBarH+10+'px'}">
					<u-search :showAction="false" actionText="搜索" :disabled="false" @focus="clickSearch"
						:animation="true"></u-search </view>
				</view>
				<template class="imageCla">
					<view style="width: 690rpx;margin-top: 29rpx;">
						<u-swiper :list="guanggaoweiList" :height="174" @change="e => current = e.current"
							:autoplay="false" @click="clickSwiper">
							<view slot="indicator" class="indicator">
								<view class="indicator__dot" v-for="(item, index) in guanggaoweiList" :key="index"
									:class="[index === current && 'indicator__dot--active']">
								</view>
							</view>
						</u-swiper>
					</view>

				</template>
			</view>
			<view class="xianshang_box">
				<view class="title_box">
					<view class="tit_box1">线上精品课程</view>
					<view class="tit_box2" @click="clickMore(1)">
						<text>查看更多</text>
						<u-icon name="arrow-right" color="#000"></u-icon>
					</view>
				</view>
				<view class="item_box">
					<view class="item" v-for="(item,index) in  onLineList" :key="index" v-if="index<2">
						<view @click="clickJobdetails(item,0)">
							<courseCourse :objectData="item" :QuantityName="'已购买'" />
						</view>
					</view>
				</view>
			</view>
			<view class="xianshang_box">
				<view class="title_box">
					<view class="tit_box1">线下精品课程</view>
					<view class="tit_box2" @click="clickMore(2)">
						<text>查看更多</text>
						<u-icon name="arrow-right" color="#000"></u-icon>
					</view>
				</view>
				<view class="item_box">
					<view class="item" v-for="(item,index) in  OffLineList" :key="index" v-if="index<2">
						<view @click="clickOffline(item)">
							<courseCourse :objectData="item" :QuantityName="'已报名'" />
						</view>

					</view>
				</view>
			</view>
			<view class="benzhoukecheng">
				<view class="kechengTitle">本周课程排行</view>
				<view class="paihang_box">
					<view class="tit_box">
						<view class="tit">
							<text style="margin-right: 40rpx;" :class="{'xuanzhong':xuanzhong==0}"
								@click="Rxuanzhong(0)">热门排行</text>
							<text @click="Rxuanzhong(1)" :class="{'xuanzhong':xuanzhong==1}">TOP5</text>
						</view>

						<u-icon name="arrow-right" color="#FFF" @click="clickMore(3)"></u-icon>
					</view>
					<view v-for="(item,index)  in  RankingList" :key="index" v-if="index<3">
						<view @click="clickJobdetails(item,2)">
							<crossCourse class="neirong_box" :objectData="item" />
						</view>
					</view>





				</view>
			</view>

			<view class="xianshang_box">
				<view class="title_box">
					<view class="tit_box1">精品课程文档</view>
					<view class="tit_box2" @click="clickMore(4)">
						<text>查看更多</text>
						<u-icon name="arrow-right" color="#000"></u-icon>
					</view>
				</view>
				<view class="item_box">
					<view class="item" v-for="(item,index) in  BoutiqueList" :key="index" v-if="index<2">
						<view @click="clickJobdetails(item,2)">
							<courseCourse :objectData="item" :QuantityName="'已购买'" />
						</view>

					</view>
				</view>
			</view>

		</view>

	</view>
</template>
<script>
	import courseCourse from '@/pages/views/packageD/template/courseCourse.vue'
	import crossCourse from '@/pages/views/packageD/template/crossCourse.vue'

	export default {
		data() {
			return {
				URL: this.$config.domain.staticUrl,
				title: "数字化学校",
				statusBarH: 0, //状态栏高度
				customBarH: 0, //导航栏高度
				windowWidth: 0, //窗口宽度
				windowHeight: 0, //窗口高度
				safeAreaInsets: 0, //底部导航栏
				heightTop: 0,
				guanggaoweiList: [], //广告图片
				guanggaoweDataList:[],//广告图片所有数据
				current: 0, //轮播当前页
				PageIndex: 1, //页码
				PageSize: 10, //每页大小
				StartTime: '', //排行榜统计时间，默认本周
				onLineList: [], //线上课程
				OffLineList: [], //线下课程
				RankingList: [], //课程排行
				BoutiqueList: [], //精品课程文档
				xuanzhong: 0, // 0 热门排行   1 TOP5  

			}
		},
		onLoad() {},
		created() {
			const app = getApp()
			// 获取状态栏和导航条高度 窗口宽度
			this.statusBarH = app.globalData.statusBarH;
			this.customBarH = app.globalData.customBarH;
			this.windowWidth = app.globalData.phoneInformation.windowWidth;
			this.windowHeight = app.globalData.phoneInformation.windowHeight;
			this.safeAreaInsets = app.globalData.phoneInformation.safeAreaInsets.bottom;
			this.guanggaowei();
			this.kecheng()

		},
		computed: {
			integerPart(e) {
				return Math.floor(this.amount);
			},
			decimalPart() {
				return (this.amount % 1).toFixed(2).substring(2);
			}
		},

		// 计算方法
		methods: {
			tiaozhuan2(val) {
				uni.navigateTo({
					url: "/pages/views/packageD/type-jobhunting/shuzihua/details?id=" +
						440339215650949,
				});
			},
			// 价格格式调整
			Price(e) {
				let num = Math.floor(e);
				if (num > 0) {
					return num;
				} else {
					return e;
				}
			},
			Price1(e) {
				let afterNum = (e % 1).toFixed(2).substring(2);
				if (afterNum >= 0) {
					return afterNum;
				}
			},

			// 热门排行
			Rxuanzhong(e) {
				console.log(e);
				if (this.xuanzhong == e) return;
				this.xuanzhong = e;
			},

			// 跳转搜索页
			clickSearch() {
				uni.navigateTo({
					url: "/pages/views/packageD/type-jobhunting/shuzihua/search",
				});
			},
			//顶部广告位
			guanggaowei() {
				this.$http.live
					.coreadlist({
						PositionId: 447400034050181,
					})
					.then((res) => {
						if (res.Success) {
							this.guanggaoweDataList=res.Result
							this.guanggaoweiList = res.Result.map((item) => {
								return this.URL + item.FilePath;
							});
						}
					});
			},
			// 点击查看更多
			clickMore(item) {
				if (item == 1) {
					let obj = {
						title: "线上精品课程",
						isShow: true,
						optionNumber: item,
					};
					uni.navigateTo({
						url: `/pages/views/packageD/type-jobhunting/shuzihua/SeeMore?object=${encodeURIComponent(
            JSON.stringify(obj)
          )}`,
					});
				} else if (item == 2) {
					let obj = {
						title: "线下精品课程",
						isShow: false,
						optionNumber: item,
					};
					uni.navigateTo({
						url: `/pages/views/packageD/type-jobhunting/shuzihua/SeeMore?object=${encodeURIComponent(
            JSON.stringify(obj)
          )}`,
					});
				} else if (item == 3) {
					let title = "";
					if (this.xuanzhong == 0) {
						title = "热门排行";
					} else {
						title = "TOP5";
					}
					uni.navigateTo({
						url: `/pages/views/packageD/type-jobhunting/shuzihua/CourseRanking?title=${title}&xuanzhong=${this.xuanzhong}`,
					});
				} else if (item == 4) {
					let obj = {
						title: "精品文档",
						isShow: true,
						optionNumber: item,
					};
					uni.navigateTo({
						url: `/pages/views/packageD/type-jobhunting/shuzihua/SeeMore?object=${encodeURIComponent(
            JSON.stringify(obj)
          )}`,
					});
				}
			},
			// 课程目录
			kecheng() {
				let obj = {
					PageIndex: this.PageIndex,
					PageSize: this.PageSize,
				};
				let obj1 = {
					PageSize: this.PageSize,
					StartTime: this.StartTime,
				};
				// 线上
				this.$http.digitalize.onlineEssence(obj).then((res) => {
					if (res.Success) {
						this.onLineList = res.Result.Items;
					}
				});
				// 线下课程
				this.$http.digitalize.inPersonEssence(obj).then((res) => {
					if (res.Success) {
						this.OffLineList = res.Result.Items;
					}
				});
				// 课程排行
				this.$http.digitalize.courseHot(obj1).then((res) => {
					if (res.Success) {
						this.RankingList = res.Result;
					}
				});
				// 精品课程
				this.$http.digitalize.documentEssence(obj).then((res) => {
					if (res.Success) {
						this.BoutiqueList = res.Result.Items;
					}
				});
			},
			// 点击进入详情
			clickJobdetails(item, index) {

				if (item.Type >= 0) {
					if (item.Type != 1) {
						uni.navigateTo({
							url: `/pages/views/packageD/type-jobhunting/shuzihua/details?id=${item.CourseId}&index=${item.Type}`,
						});
					} else {
						uni.navigateTo({
							url: `/pages/views/packageD/type-jobhunting/shuzihua/OfflineCourseDetails?id=${item.CourseId}`,
						});
					}
				} else {
					uni.navigateTo({
						url: `/pages/views/packageD/type-jobhunting/shuzihua/details?id=${item.CourseId}&index=${index}`,
					});
				}

			},
			// 点击线下进入详情
			clickOffline(item) {

				uni.navigateTo({
					url: `/pages/views/packageD/type-jobhunting/shuzihua/OfflineCourseDetails?id=${item.CourseId}`,
				});
			},
			//点击广告位
			clickSwiper(e) {
				
				let obj={}
				this.guanggaoweDataList.forEach((res,index)=>{
					if(index==e){
						obj=res
					}
					
				})
				uni.navigateTo({
					url: `/pages/views/packageD/type-jobhunting/shuzihua/searchResult?SwiperDedails=${JSON.stringify(obj)}`
				})
			}
		},
		components: {
			courseCourse,
			crossCourse,
		},
	};
</script>

<style lang="scss" scoped>
	.indicator {
		@include flex(row);
		justify-content: center;

		&__dot {
			height: 6px;
			width: 6px;
			border-radius: 100px;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 5px;
			transition: background-color 0.3s;

			&--active {
				background-color: #ffffff;
			}
		}
	}

	.xuanzhong {
		font-size: 40rpx;
	}

	.box {
		width: 100%;
		height: 100vh;

		.content {

			.content-top {
				margin-bottom: 20rpx;
				background-image: url('/static/image/specialrecruitment/background.png');
				background-repeat: no-repeat;
				background-size: cover;
				padding: 0 30rpx;
			}

			.content-title {
				display: flex;
				align-items: center;

			}

			.imageCla {
				width: 690rpx;
				height: 348rpx;
				margin-top: 29rpx;
				display: flex;
				justify-content: center;
				border: 1px solid red;

			}

			.xianshang_box {
				padding: 30rpx 30rpx;

				.title_box {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.tit_box1 {
						font-size: 32rpx;
						font-weight: 700;
						color: #000000;
					}

					.tit_box2 {
						display: flex;
						align-items: center;

						text {
							font-size: 28rpx;
							font-weight: 400;
							color: #999999;
							margin-right: 20rpx;
						}
					}
				}

				.item_box {
					padding-top: 20rpx;
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;

					.item {
						background-color: #fff;
						width: 48%;

						border-radius: 10rpx 10rpx 10rpx 10rpx;

						.img {
							width: 100%;
							height: 190rpx;
							background: #FFFFFF;
							border-radius: 10rpx 10rpx 0rpx 0rpx;
							opacity: 1;
						}

						.tit_box {
							padding: 3rpx 20rpx;

							.timu {
								height: 72rpx;
								font-size: 26rpx;
								font-weight: 400;
								color: #000000;
								//超出两行省略号
								text-overflow: -o-ellipsis-lastline;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-line-clamp: 2;
								line-clamp: 2;
								-webkit-box-orient: vertical;


							}

							.haoping {
								width: 131rpx;
								padding: 4rpx 17rpx;
								border-radius: 8rpx 8rpx 8rpx 8rpx;
								opacity: 1;
								border: 1rpx solid #E0AF3C;
								font-size: 24rpx;
								font-weight: 400;
								color: #E0AF3C;
								display: flex;
								justify-content: center;
								align-content: center;
								margin: 20rpx 0;
							}

							.jiage_box {
								display: flex;
								justify-content: space-between;
								align-items: baseline;
								padding: 15rpx 0 19rpx;

								.jiage {
									color: #F35370;

									.fuhao {
										font-size: 26rpx;
										font-weight: bold;

									}

									.zhengshu {
										font-size: 38rpx;
										font-weight: bold;
									}

									.dian {
										font-size: 42rpx;
									}

									.xiaoshu {
										font-size: 26rpx;
									}

								}

								span {
									font-size: 26rpx;
									font-weight: bold;
									color: #F35370;
								}

								.renshu {
									font-size: 24rpx;
									font-weight: 400;
									color: #999999;
								}

							}


						}
					}
				}

			}

			.benzhoukecheng {
				padding: 30rpx 30rpx;

				.kechengTitle {
					font-size: 32rpx;
					font-weight: bold;
					color: #000000;
				}

				.paihang_box {
					background-image: url('/static/image/packageD/kechengpaihang.png');
					background-repeat: no-repeat;
					background-size: cover;
					padding: 30rpx 30rpx 10rpx;
					margin: 20rpx 0;
					border-radius: 10rpx 10rpx 10rpx 10rpx;

					.tit_box {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 20rpx;
						font-size: 30rpx;
						font-weight: bold;
						color: #FFFFFF;


					}

					.neirong_box {
						margin-bottom: 20rpx;

						.imgebox {
							margin-right: 20rpx;

							.imgg {
								width: 210rpx;
								height: 128rpx;
								background: #FFFFFF;
								border-radius: 10rpx 10rpx 10rpx 10rpx;
								opacity: 1;
							}
						}

						.rig_neirong {
							display: flex;
							flex-wrap: wrap;
							align-items: center;

							.timu {
								font-size: 28rpx;
								font-weight: bold;
								color: #000000;
								//超出两行省略号
								text-overflow: -o-ellipsis-lastline;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-line-clamp: 2;
								line-clamp: 2;
								-webkit-box-orient: vertical;
							}

							.xuexi {
								font-size: 24rpx;
								font-weight: 400;
								color: #999999;
							}
						}
					}
				}
			}
		}

	}
</style>